<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>点对点发送</title>
    <script th:src="@{/js/jquery-3.0.0.js}"></script>
    <script th:src="@{/js/sockjs.min.js}"></script>
    <script th:src="@{/js/stomp.min.js}"></script>
</head>
<body>
<form id="JanetForm">
    输入:<textarea rows="4" cols="60" name="text"></textarea>
    接受者id:<input type="text" name="userid"/>
    <input type="submit"/>
</form>
<button id="stop">断开</button>
<hr/>
<div id="output"></div>
</body>
<script th:inline="javascript">
    //当前登录用户的id
    var userid = [[${userid}]];
    //提交表单
    $('#JanetForm').submit(function (e) {
        e.preventDefault();
        var text = $('#JanetForm').find('textarea[name="text"]').val();
        var receiveId = $('#JanetForm').find('input[name="userid"]').val();
        sendMsg(text,receiveId);
    });
    //连接endpoint为"/ws/endpointChat"的节点,需要与后台配置一样
    var sock = new SockJS("/ws/endpointChat");
    var stomp = Stomp.over(sock);
    //连接WebSocket服务端
    stomp.connect({},function (frame) {
        //订阅/user/queue/chat发送的消息，这里与在控制器的messagingTemplate.convertAndSendToUser中定义的订阅地址保持一致。
        //这里多了一个/user，并且这个user是必须的，使用了/user才会发送消息到指定的用户
        stomp.subscribe("/user/"+userid+"/queue/chat",receiveMsg);
    });

    /**收到消息*/
    function receiveMsg(message) {
        $('#output').append("<b>收到了:" + message.body + "</b><br/>")
    }
    /**发送消息*/
    function sendMsg(text,receiveId) {
        //表示向后端路径/chat发送消息请求，这个是在控制器中@MessageMapping中定义的。
        stomp.send("/chat",{},JSON.stringify({'msg':text,'senderid':userid,'receiveid':receiveId}));
    }

    /**断开*/
    $('#stop').click(function (){
        sock.close();
    });

</script>
</html>